<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="demo">正在支付中。。。</p>

    <p>{{raw}}</p>
    <script>
        function onBridgeReady() {
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                "appId": "{{raw.appId}}",     //公众号名称，由商户传入     
                "timeStamp": "{{raw.timeStamp}}",         //时间戳，自1970年以来的秒数     
                "nonceStr": "{{raw.nonceStr}}", //随机串     
                "package": "{{raw.package}}",
                "signType": "{{raw.signType}}",         //微信签名方式：     
                "paySign": "{{raw.sign}}" //微信签名 
            },
                function (res) {
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        // 使用以上方式判断前端返回,微信团队郑重提示：
                        //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。

                        document.getElementById("demo").innerHTML = "支付成功";
                    }
                });
        }
        if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
            } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
            }
        } else {
            onBridgeReady();
        }
    </script>

</body>

</html>